<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-table.css">
<link rel="stylesheet" href="../assets/css/sweetalert.css">
<link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css">
<link type="text/css" href="../assets/css/bootstrap-timepicker.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrap-table.js"></script>
<script src="../assets/js/bootstrap-table-export.js"></script>
<script src="../assets/js/bootstrapValidator.min.js"></script>
<script src="../assets/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/js/bootstrap-datepicker.zh-CN.js"></script>
<script src="http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="../assets/js/bootstrap-table-zh-CN.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<script src="../assets/js/bootstrap-timepicker.min.js"></script>
<title>出勤记录查询</title>
<style>
    .btn-default {
        height: 34px
    }

    .form-control {
        height: 30px
    }
</style>
<div class="container" style="width:90%; height: auto">
    <h1>出勤记录查询</h1>
    <form class="form-inline" id="searchForm" style="padding:2px 5px">
        <div class="form-group">
            <label>员工工号:</label>
            <input class="form-control" type="text" id="searchEmployeeCode" name="employeeCode">
        </div>
        <div class="form-group" style="padding: 4px 0 4px 0">
            <label for="datepicker">打卡日期:</label>
            <div class="input-group input-daterange" id="datepicker" style="width: 85%">
                <input class="form-control datepicker" readonly="readonly" type="text" placeholder="起始日期"
                       id="searchStartDate" name="dateStart" style="background-color: rgba(221, 221, 221, 0)">
                <span class="input-group-addon add-on">&nbsp;-&nbsp;</span>
                <input class="form-control datepicker" readonly="readonly" type="text" placeholder="结束日期"
                       id="searchEndDate" name="dateEnd" style="background-color: rgba(221, 221, 221, 0)">
            </div>
        </div>



        &#12288;
        <button type="button" class="btn btn-primary" onclick="searchSigninout()"
                style="height: 30px;vertical-align: middle"><i class="glyphicon glyphicon-search"></i> 搜索
        </button>
    </form>
    <hr>

    <table id="table" class="table-responsive"
           data-toolbar="#toolbar"
           data-search="false"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-export="true"
           data-minimum-count-columns="2"
           data-pagination="true"
           data-unique-id="id"
           data-page-number="1"
           data-page-size="10"
           data-page-list="[10, 20, 30, 40]"
           data-pagination-pre-text="上一页"
           data-pagination-next-text="下一页"
           data-show-footer="false"
           data-side-pagination="server"
           data-valign="middle"
           data-url="/signinout/getAllSummary"
           data-query-params="queryParams"
           data-response-handler="responseHandler">
    </table>
</div>

<script type="text/javascript">
    $(function () {
        //清除弹窗原数据
        formValidator();
        $('.datepicker').datepicker({
            language: "zh-CN",
            format: "yyyy-mm-dd",
            autoclose: true,
            clearBtn: true,
            todayHignlight: true
        }).on('hide', function (e) {
        });


        $("#table").bootstrapTable({
            height: 600,   //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showColumns: true, //显示隐藏列
            striped: true,
            columns: [
                {
                    title: '员工工号',
                    field: 'employeeCode',
                    align: 'center',
                    valign: 'middle'
                },
                {
                  title: '员工姓名',
                    field: 'employeeName',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '打卡天数',
                    field: 'signin_count',
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: '请假天数',
                    field: 'leaves_count',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '出差天数',
                    field: 'field_count',
                    align: 'center',
                    valign: 'middle'
                },

            ]
        });
    });

    function queryParams(params) {
        return {
            pageSize: params.limit,
            pageNumber: $('#table').bootstrapTable('getOptions').pageNumber,
            sort: params.sortName,
            order: params.sortOrder,
            employeeCode: $("#searchEmployeeCode").val(),
            dateStart:dateFormatter_for_search($("#searchStartDate").datepicker("getDate")),
            dateEnd:dateFormatter_for_search($("#searchEndDate").datepicker("getDate")),

        };
    }
    function responseHandler(res) {
        return {
            "rows": res.signinoutsummary.list,
            "total": res.signinoutsummary.total
        }
    }
    function dateFormatter(value, row, index) {
        if (value != null)
            return new Date(value).Format("yyyy-MM-dd");
        else
            return "没打卡";
    }
    function dateFormatter_for_search(value, row, index){
        if (value != null)
            return new Date(value).Format("yyyy-MM-dd");
        else
            return null;
    }
    function timeFormatter(value,row,index){
        if (value != null)
            return new Date(value).Format("hh:mm:ss");
        else
            return "没打卡";
    }
    function levelFormatter(value, row, index) {
        if (value == 1)
            return "普通员工";
        else if (value == 2)
            return "部门经理";
        else if (value == 3)
            return "总经理";
        else
            return "管理员"
    }

    function searchSigninout() {
        $("#table").bootstrapTable('refresh');
    }


    function formValidator() {
        $('#addSigninoutForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                employeeCode: {
                    message: '员工工号验证失败',
                    validators: {
                        notEmpty: {
                            message: '员工工号不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '工号只能包含数字'
                        }
                    }
                },


                date: {
                    validators: {
                        notEmpty: {
                            message: '日期不能为空'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
    }
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>